<template>
  <div>
    <h2>我是父组件</h2>
    <div>金钱：{{ money }}</div>
    <div>车辆：{{ car }}</div>
    <hr />
    <!-- @changeMoney 自定义事件 -->
    <!-- 当changeMoney 这个事件发生了，需要调用changeMoney方法 -->
    <!-- 在vue2中，通过this.$emit("changeMoney",666) -->
    <!-- 在vue3中，setup中没有this, 想办法得到emit -->
    <!-- 需要调用函数得到的emit, 在vue3中，自定义事件也需要接收 -->
    <Son :money="money" :car="car" @changeMoney="changeMoney"></Son>
  </div>
</template>

<script setup>
import Son from "./Son.vue";
import { ref } from "vue";

const money = ref(100);
const car = ref("玛莎拉蒂");

// 子去触发changeMoney事件时，可以传参
// num就是子传递过来的数据
const changeMoney = (num) => {
  // console.log("--num:", num);
  money.value = money.value - num;
};
</script>

<style lang="scss" scoped>
</style>